<template>
  <!-- 编辑 -->
  <el-dialog :title="title" :visible="dialogFormVisible" @close="close">
    <el-form :model="form" :rules="rules" ref="editForm">
      <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" :label-width="formLabelWidth" prop="code">
        <el-input v-model="form.code" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item
        label="部门负责人"
        :label-width="formLabelWidth"
        prop="manger"
      >
        <el-select v-model="form.manager" placeholder="请选择活动区域">
          <el-option
            v-for="item in userSimple"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="部门介绍"
        :label-width="formLabelWidth"
        prop="introduce"
      >
        <el-input v-model="form.introduce" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:dialogFormVisible', false)"
        >取 消</el-button
      >
      <el-button type="primary" @click="editSubmit('editForm')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { userSimpleApi } from "@/api/user";
import {
  departmentEditApi,
  departmentApi,
  departmentAddApi
} from "@/api/departments";
export default {
  props: {
    dialogFormVisible: {
      type: Boolean,
      required: true
    },
    nodeData: {
      type: Object
    }
  },
  watch: {
    nodeData(newVal) {
      //console.log();
      if (newVal.addFlag) {
        //  添加
        this.form.id = this.nodeData.id;
        this.form.addFlag = this.nodeData.addFlag;
      } else {
        //   编辑
        this.form = newVal;
      }
      // console.log(this.form, 666777);
    }
    // this.form = this.nodeData;
    // console.log(this.nodeData, 888);
  },
  data() {
    var checkCode = async (rule, value, callback) => {
      //console.log(123);
      //  value   当前表单输入的值   2
      //  获取所有的编码   【1，2，3，4，5】
      //  value在不在这个 所有的编码中

      //   获取所有的编码
      const { depts } = await departmentApi(); //  获取所有的组织架构  每一项中有code
      var flag = depts.some(item => {
        if (item.code == value) {
          return false; //  编码库里面有
        } else {
          return true; //  编码库里面不存在
        }

        //return item.code !== value
      }); //获取当前输入的code在每一项中没有的

      if (!flag) {
        console.log(1111);
        callback(new Error(`组织架构中已经有部门使用${value}编码`));
      } else {
        console.log(2222);
        callback();
      }
    };
    return {
      form: {
        name: "",
        code: "",
        introduce: "",
        manager: "",
        pid: ""
      },
      userSimple: [],
      formLabelWidth: "120px",

      /* 校验规则 */
      rules: {
        name: [
          { required: true, message: "部门名称不能为空", trigger: "blur" }
        ],
        code: [
          { required: true, message: "部门编码不能为空", trigger: "blur" },
          { validator: checkCode, trigger: "blur" }
        ],
        introduce: [
          { required: true, message: "部门介绍不能为空", trigger: "blur" }
        ],
        manager: [
          { required: true, message: "部门部门负责人不能为空", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    title() {
      return !this.nodeData.addFlag ? "编辑部门" : "添加部门";
    }
  },
  created() {
    this.getUserSimple();
  },
  methods: {
    async getUserSimple() {
      const res = await userSimpleApi();
      //console.log(res, 6666);
      this.userSimple = res;
    },
    close() {
      this.$emit("update:dialogFormVisible", false);
      this.$emit("refreshTree");
      this.$refs.editForm.resetFields();
      this.form = {
        name: "",
        code: "",
        introduce: "",
        manager: "",
        pid: ""
      };
    },

    /*按钮提交 */
    editSubmit(qq) {
      //this.$refs.editForm.validate(isOk => {
      this.$refs[qq].validate(async isOk => {
        if (isOk) {
          /*
          add：true 字段  ====添加====区分编辑和添加
          id  部门还是标题：有不有 id  ====区分标题和部门

          解决方案：
          + 添加： addFlag 表示 部门
            + id='' 表示一级
            + id有值表示 非一级

          + 编辑： !addFlag
           */
          if (!this.form.addFlag) {
            //  编辑
            const res = await departmentEditApi(this.form);
          } else {
            //  添加  区分一级部门  还是二级部门
            /* this.form.id   存在  表示有父级    不存在 就表示添加的是一级  */
            this.form.pid = this.form.id ? this.form.id : "";
            const res = await departmentAddApi(this.form);
          }
          //  成功后  需要关闭对话框  刷新页面
          this.close();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>

